<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" :circular="false" previous-margin="100rpx" next-margin="150rpx"
				:duration="duration">
				<swiper-item @change="changeIndicatorDots(index)">
					<view class="No_attention_bottom_swiper_01">
						<view class="No_attention_bottom_swiper_01_close">
							<text @click="vanish">X</text>
						</view>
						<view class="No_attention_bottom_swiper_01_head">
							<u--image :showLoading="true" src="item" width="150rpx" height="150rpx" @click="click"
								shape='circle' :fade='false'></u--image>
						</view>
						<view class="No_attention_bottom_swiper_01_text">
							<text>用户名</text>
							<text class="No_attention_bottom_swiper_01_text_02">最近一次视频的发布时间</text>
						</view>
						<view class="No_attention_bottom_swiper_01_img">
							<u--image :showLoading="true" :src="item" width="150rpx" height="150rpx" @click="click"
								:fade='false' v-for="(item,index) in video" :key="index"></u--image>
						</view>
						<view class="No_attention_bottom_swiper_01_text">
							<u-button text="关注" shape="circle" color="#f72647"></u-button>
						</view>
					</view>
				</swiper-item>	
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            background: ['red', 'blue', 'green'],
            interval: 2000,
            duration: 500,
			video:[]
        }
    },
	onLoad() {
		this.request("/")
	},
    methods: {
        changeIndicatorDots(e) {
           console.log(e);
        },
        changeAutoplay(e) {
          console.log(e);
        },
        intervalChange(e) {
			console.log(e);
        },
        durationChange(e) {
            
			console.log(e);
        },
		vanish(){
			console.log("关闭");
		},
		click(){
			uni.navigateTo({
				url:"/pages/My/setImg/setImg"
			})
		}
    }
}
</script>
<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 800rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		margin: 0 20rpx;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
.u-demo-block {
		display: flex;
		justify-content: center;
	}

	.No_attention_bottom_swiper {
		width: 751rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		/* overflow: hidden; */

	}

	.No_attention_bottom_swiper_01 {
		width: 500rpx;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		border: 2px solid #e6e6e6;
		background-color: white;
		border-radius: 16rpx;
		margin: 0 15rpx;
	}

	.No_attention_bottom_swiper_01_close {
		width: 100%;
		display: flex;
		justify-content: right;
		padding-right: 30rpx;
		font-size: 25rpx;
		color: #e6e6e6;
	}

	.No_attention_bottom_swiper_01_text {
		width: 200rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.No_attention_bottom_swiper_01_text_02 {
		font-size: 24rpx;
		width: 500rpx;
		text-align: center;
	}

	.No_attention_bottom_swiper_01_img {
		display: flex;
	}
</style>





